<template>
  <div class="menu">
    <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="status" @open="handleOpen"
      @close="handleClose">
      <div class="title">
        会议管理系统
      </div>
      <router-link to="/home">
        <el-menu-item index="2">
          <el-icon>
            <home-filled />
          </el-icon>
          <template #title>首页</template>
        </el-menu-item>
      </router-link>
      <router-link to="/meeting">
        <el-menu-item index="3">
          <el-icon>
            <document />
          </el-icon>
          <template #title>会议管理</template>
        </el-menu-item>
      </router-link>
      <router-link to="/user">
        <el-menu-item index="4">
          <el-icon>
            <setting />
          </el-icon>
          <template #title>个人信息</template>
        </el-menu-item>
      </router-link>
    </el-menu>

  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue'
const props = defineProps({
  status: {
    type: Boolean,
    default: () => [],
  },
})

</script>

<style scoped>

.title {
  height: 60px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}
</style>